<script setup>
import { onMounted ,ref} from "vue";
import { ElMessage } from 'element-plus';

import indexSonSearch  from './TableSearch/indexSonSearch.vue';
import { searchObj,currentX,currentY,shuruchange,
    toggleShow,dianjidedanyuangehangshu, draggable,isDragging,
    isDraggingScale,startX,startY,youXiaJiaoX,youXiaJiaoY,
    handleMouseDown,handleMouseMove,handleMouseMoveScale,handleMouseUp,
    handleMouseUpScale,updatePosition} from './TableSearch/indexSon.js';

import {selectData1,selectDataWeb1,saveData1,deleteFun,insertFun2,updateFun  } 
from "../js/InsertDeleteSelectUpdates1205";

 
//A定义各种变量常量的位置
const yzdklist=ref([]);
const tableRefYzDk=ref(null);
 

const bsConst=ref({
    name: 'VxeSelect',
    options:[
        {label:'0.重复收取',value:'0'},
        {label:'1.只收取1次',value:'1'},
        {label:'3.按标本计费',value:'3'},
        {label:'4.只收取2次',value:'4'},
        {label:'6.按当天最大次数',value:'6'} 
    ] 
})
const mzzyConst=ref({
    name: 'VxeSelect',
    options:[
        {label:'门诊住院',value:''},
        {label:'0.门诊',value:'0'},
        {label:'1.住院',value:'1'} 
    ] 
})
const lxConst=ref({
    name: 'VxeSelect',
    options:[
        {label:'1.诊疗',value:'1'},
        {label:'2.材料',value:'2'} 
    ] 
})
//查询
const getyzdklist =async ()=>{
    yzdklist.value=[];
    if(props.getPageRigthDataObj.fybh!=0 && props.getPageRigthDataObj.fybh!="0" && props.getPageRigthDataObj.fybh!="" && props.getPageRigthDataObj.fybh!=null){
        const res =await selectData1('100009',{fybh:props.getPageRigthDataObj.fybh},"");
        console.log(res);
        yzdklist.value=res.ReContent;
    }
    
}
//新增
const insert1=()=>{
    var i= 0;
    if(yzdklist.value!=null && yzdklist.value.length>0 ){
        i= yzdklist.value[yzdklist.value.length-1].xh ;
    }
    const insertObj={
        
        bh :props.getPageRigthDataObj.bh, 
        bs : "0", 
        dlb : "1" ,
        fybh :"0", 
        kkbm : "11", 
        kkfs :"",
        lx :"0",
        mzzybj : "1", 
        saveFlag : 1 ,
        sfjf : "1", 
        sl : 1 ,
        xh : i+1 ,
        xlbh :"" ,
        xlbh_js :"", 
        xlmc :"", 
        xpsm_zth :props.getPageRigthDataObj.bh, 
        xzcs :11
    };
    insertFun2(insertObj,yzdklist.value,tableRefYzDk); 
}
//修改
let updateConst='';
const rowObj=ref({});
const update1=(row ,i )=>{
    updateFun(row,i,yzdklist.value,tableRefYzDk,updateConst,rowObj);
} 
//删除
const delete1=()=>{
    deleteFun( yzdklist.value,tableRefYzDk);
    saveData1(100010,"httphosptalserver",yzdklist.value,"");
    ElMessage({
                showClose: true,
                message: '删除数据成功',
                type: 'success',
                duration:'5000',
                offset:40 
            });
}
//保存
const save1= ()=>{
    saveData1(100010,"httphosptalserver",yzdklist.value,"");
    ElMessage({
                showClose: true,
                message: '保存数据成功',
                type: 'success',
                duration:'5000',
                offset:40 
            });
}
const props = defineProps(
    {
        getPageRigthDataObj:{
        type:Object,
        required:true
        }
    } 
);
watch(()=>props.getPageRigthDataObj.bh,(New,Old)=>{
    getyzdklist();
},{deep:true}); 




//传给搜索框的数据源-----------------------------------------------------------------------
//这个界面搜索框有两个数据源费用和材料，getfeiyongxioaleilist是获取费用的数据源
const data1=ref([]);
const fyxlselectduixiang = ref({
    QB_ZY_FYXL: {
        fydl: '',
        fyzl: '',
        bmbm: '',
        jm: '',
        mc1: '',
        sfxs: '0'

    },
    MyPaginationDto: {
        PageNo: 1,
        PageSize: 10000,
        OrderByname: 'bh'
    }
});
const getfeiyongxioaleilist = (async () => {
    const res = await selectData1('100001',fyxlselectduixiang.value,"");
    data1.value=res.ReContent.Content;
    
});
const zxkslist =ref({name: 'VxeSelect',options: []});
//执行科室
const selectweb_xp_bm_zxks=async ()=>{
  const res =await  selectDataWeb1('GetFixCode', { "bh":  'xp_bm_zxks'});
  zxkslist.value.options= res.ReContent ;
}


//2.输入值要和那几个列进行匹配，比如可能是和简码或者名称进行匹配
const dataCell=ref(['mc1','jm']);
//3.搜索框列表每列的宽度和顺序数组
const datalistlabel = ref([
   { value: 'bh', label: '编号', widths: '10%' },
   { value: 'jm', label: '简码', widths: '10%' },
   { value: 'mc1', label: '名称', widths: '40%' },
   { value: 'rybm', label: '价格', widths: '20%' },
   { value: 'jldw', label: '单位', widths: '20%' }
]);
//监听搜索框的双击事件，如果双击了就把双击行的数据传给父组件，然后关闭搜索框，这里要把选中的数据进行赋值，注意改接收数据源名称
const xuanzhongFuZhi=(row)=>{
    yzdklist.value[dianjidedanyuangehangshu].xlbh=row.bh
   //把输入框的值赋给当前行
    yzdklist.value[dianjidedanyuangehangshu].xlmc=row.mc1
   // 双击选中选项的同时，关闭搜索框，并且把相关位置的变量置0
    searchObj.value.isshowsearch=false;
    currentX.value=0;
    currentY.value=0;
    startX.value=0;
    startY.value=0;
    searchObj.value.x=0;
    searchObj.value.y=0;
};

onMounted(()=>{
    getyzdklist();
    getfeiyongxioaleilist();
    selectweb_xp_bm_zxks();
})

onUnmounted(() => {
  // 清理事件监听器
  document.removeEventListener('mousemove', handleMouseMove);
  document.removeEventListener('mouseup', handleMouseUp);
  document.removeEventListener('mousemove', handleMouseMoveScale);
  document.removeEventListener('mouseup', handleMouseUpScale);
});

</script>

<template>
    <div style="height: 100%;width: 100%;">
        <indexSonSearch 
            ref="draggable" 
            class="draggable"
            :style="{
            top: searchObj.y + 'px',
            left: searchObj.x + 'px', 
            width: searchObj.width+'px',
            height: searchObj.height + 'px'  }"
            :data="searchObj.data" 
            :tableTitle="searchObj.tableTitle" 
            :dataCell="searchObj.dataCell"
            :inputValue="searchObj.inputValue"
            :searchObjw=searchObj.width
            :searchObjh="searchObj.height-75+'px'" 
            @close="toggleShow"
            @xuanzhong="xuanzhongFuZhi"     
            v-if="searchObj.isshowsearch" >
            <template #main-title>
                <!-- 把拖拽事件放到标题插槽的元素上面 -->
                <div 
                    style="background: darkseagreen;width: 100%;height: 100%;"  
                    @mousedown="(event ) =>handleMouseDown(event,1)"> 
                </div>   
            </template>
            <template #main-bottom>
                <!-- 把拖拽放大缩小事件放到标题插槽的元素上面 -->
               
                <img src="../../../../assets/images/zoom-internal.png"
                style="width: 100%;height: 100%;" 
                    @mousedown="(event ) =>handleMouseDown(event,2)" 
                     />
            </template>           
        </indexSonSearch >

        <div class="divtop">
            <div class="button-case">
                <div class="button-case-box xpFontSyzt" @click="insert1()"  > 
                    <img
                        src="@/assets/images/add_icon.png"
                        style="width: 16px; height: 16px; margin-right: 2px"
                        alt=""
                        srcset=""
                        />
                     <div>新增项目</div>
                </div>
                <div class="button-case-box xpFontSyzt" @click="delete1()">
                    <img
                      src="@/assets/images/qingkong_icon.png"
                      style="width: 16px; height: 16px; margin-right: 2px"
                      alt=""
                      srcset=""
                    />
                    <div>清空</div>
                </div>
                <div class="button-case-box xpFontSyzt" @click="save1()">
                    <img
                      src="@/assets/images/save_icon.png"
                      style="width: 16px; height: 16px; margin-right: 2px"
                      alt=""
                      srcset=""
                    />
                    <div>保存</div> 
                </div>
            </div>
        </div>  
        <div style="height:calc(100% - 40px) ; " >
            <vxe-table
            ref="tableRefYzDk"
            border
            height= auto  
            show-overflow
            :columnConfig="{resizable: true}"
            :row-config="{isCurrent:true,isHover:true}"
            :edit-config="{mode: 'cell', trigger: 'click',showIcon:false}"
            :data="yzdklist"
            :scroll-y="{enabled: true, gt: 0}"
            @editActivated="(row) => update1(row,1)"   
            @edit-closed="(row) => update1(row,2)"   
            @cell-click="(row) => update1(row,3)"   
             
           >
            
            
            <vxe-column field='xh'     title='序号'      width=60   >
            </vxe-column>
            <vxe-column    title='操作' width=50 >
                <el-popconfirm title="确认删除吗?"
                confirm-button-text="确认"
                cancel-button-text="取消"
                @confirm="delete1()"
                 
                >
                <template #reference>
                    <a  style="color: red;">删除</a>
                </template>
                </el-popconfirm>   
                
            </vxe-column>
            <vxe-column field='fybh'   title='编码'  width=100  >
            </vxe-column>
            <vxe-column field='dlb'   title='类型'  width=80    :edit-render=lxConst>
            </vxe-column>
            <vxe-column field="xlbh" title="费用编号" width="140" :edit-render="{ name: 'input' }" >
                <template #edit="{ row } "  style=" pointer-events: none;" > 
                    <vxe-input  id="yuanshuicd" v-model="row.xlbh" 
                    @change=" (event ) => shuruchange(event,'yuanshuicd',row,tableRefYzDk,data1,dataCell,datalistlabel,2 ,1)">
                    </vxe-input>
                </template>
            </vxe-column>

            <vxe-column field='xlmc' title='费用名称'    width=140   :edit-render="{ name: 'input'}">
            </vxe-column>
            <vxe-column field='sl'    title='数量' width=120    :edit-render="{ name: 'input'}">
            </vxe-column>
            <vxe-column field='bs' title='标识'  width=90    :edit-render=bsConst>
            </vxe-column>
            <vxe-column field='sfjf'   title='是否计费'  width=80     >
            </vxe-column>
            <vxe-column field='kkbm' title='扣减部门'  width=90     :edit-render=zxkslist>
            </vxe-column>
            <vxe-column field='mzzybj'   title='门诊住院标记'  width=140    :edit-render=mzzyConst>
            </vxe-column>
            <vxe-column field='xzcs'   title='最大限制次数'  width=140    :edit-render="{ name: 'input'}">
            </vxe-column>
            <vxe-column field='xlbh_js' title='加收编号'  width=90    >
            </vxe-column>
             

          </vxe-table>
        </div>  
         
        
        
         
    </div>  
</template>
<style lang="scss"   scoped>
    //搜索框放大移动需要的样式
    .draggable {
        float: left;
        position:fixed ;
        z-index:1999;
        will-change: 'transform';  /* 开起硬件加速 */
    }

    .divtop{
        height: 40px;
        width: 100%;
        border: 1px solid #EBEBEB;
        .button-case{
             
            display: flex;
            align-items: center;
            font-size: 14px;
            color: #333333;
            padding: 10px 12px 10px 12px;
            height: 40px;
            .button-case-box {
                display: flex;
                align-items: center;
                margin-right: 12px;
                cursor: pointer; /* 可选：使光标变为指针，表示可点击 */
            }
        }
    }



    .div20{
        width: 100%;
        height: 20px;
        margin-bottom: 12px;
        background-color: rgb(97, 114, 172);
    }
    .div32{
        width: 100%;
        height: 32px;
        margin-bottom: 12px;
        background-color: rgb(216, 220, 234);
        display: flex;
        gap: 12px;
        .div32s{
            display: flex;
            width: 100%;
        }
    }
    .div52{
        width: 100%;
        height: 52px;
        margin-bottom: 12px;
        background-color: rgb(243, 243, 243);
        display: flex;
        gap: 12px;
        .div52s{
            display: flex;
            width: 100%;
        }
    }
    .xpfont{
        font-family: Microsoft YaHei, Microsoft YaHei;
        font-weight: 400;
        font-size: 14px;
        color: #333333;
        line-height: 20px;
        text-align: right;
        font-style: normal;
        text-transform: none;
    }
</style>